$imgSkinUrl: '../images/';

.sqIco {
    display: inline-block;
    &:before{
        content: '';
        display: inline-block;
        background-image: url('#{$imgSkinUrl}sqIco_spirit.png');
        background-repeat: no-repeat;
        vertical-align: text-bottom;
    }
    &.sqIco_1:before{
        width: 14px;
        height: 14px;
        background-position: 0 0;
    }
    &.sqIco_2:before{
        width: 14px;
        height: 14px;
        background-position: 0 -19px;
    }
    &.sqIco_3:before{
        width: 17px;
        height: 17px;
        background-position: 0 -37px;
    }
    &.sqIco_4:before{
        width: 13px;
        height: 18px;
        background-position: 0 -60px;
    }
    &.sqIco_5:before{
        width: 22px;
        height: 22px;
        background-position: 0 -83px;
    }
    &.sqIco_6:before{
        width: 22px;
        height: 22px;
        background-position: 0 -110px;
    }
    &.sqIco_7:before{
        width: 22px;
        height: 22px;
        background-position: 0 -137px;
    }
    &.sqIco_8:before{
        width: 14px;
        height: 17px;
        background-position: 0 -164px;
    }
    &.sqIco_12:before{
        width: 10px;
        height: 12px;
        background-position: 0 -247px;
    }

    &.sqIco_user:before{
        width: 20px;
        height: 23px;
        background-position: -30px -186px;
    }
    &.sqIco_pw:before{
        width: 20px;
        height: 23px;
        background-position: -30px -221px;
    }
    &.sqIco_downArrow:before{
        width: 9px;
        height: 6px;
        background-position: -30px -262px;
    }
    &.sqIco_downArrowActive:before{
        width: 9px;
        height: 6px;
        background-position: -50px -262px;
    }
    &.sqIco_task:before{
        width: 16px;
        height: 16px;
        background-position: -30px -272px;
    }
}